import { marked, Renderer } from 'marked';
import { ref, reactive } from 'vue';
import { getFirstParagraphObj } from '../parseMd';

//markdown arr
let markdownArr = reactive([]);
//用户基本信息
const userBaseInfo = reactive({});
//用户基本信息对象 html字符串
const userBaseInfoStr = ref(null);
//求职意向信息
const intendedPositionInfo = reactive({});
//求职意向信息  html字符串
const intendedPositionInfoStr = ref(null);
//教育背景信息
const educationalBackground = reactive({});
//求职意向信息  html字符串
const educationalBackgroundStr = ref(null);
//技能特长的索引
const skillsIndex = ref(0);
//技能特长信息
let skillsInfoArr = reactive([]);
//技能特长信息  html字符串
const skillsInfoStr = ref(null);


const renderer = new marked.Renderer();
marked.setOptions({
    renderer: renderer,
    gfm: true,
    // tables: true,
    breaks: false,
    pedantic: false,
    // sanitize: false,
    smartLists: true,
    smartypants: false,
    sanitize: true,
});

// 重写 heading 方法 h1-h6
renderer.heading = function (this: Renderer, text, level, raw, slugger) {
    // console.log(this.options.tokenizer.lexer.tokens);
    markdownArr = this.options.tokenizer.lexer.tokens;
    const t = getFirstParagraphObj(this);
    // userBaseInfo = t;
    // console.log(t, text, level, raw, slugger);
    // console.log(this, text, 'text', level, 'level', raw, slugger);

    //取出技能特长的描述在数组中的索引
    skillsIndex.value = markdownArr.findIndex((i) => {
        return i.raw.includes('技能');
    });

    let resStr: string;
    if (level === 1) {
        resStr = `<h${level} class="custom-heading">${text}</h${level}>`;
    } else {
        resStr = `<h${level} class="custom-heading">${text}</h${level}>`;
    }
    return resStr;
};

//自定义段落  支持两套  一套为固定模板（样式在生成时就固定）  一套为生成对象，根据生成的对象可以自定义样式
renderer.paragraph = function (text: string) {
    const userInfoArr = ['name', 'avatar', 'avatarCircle', 'graduation', 'blog', 'desc'];
    // console.log(text, 'test');
    //用户基本信息处理
    if (text.includes('name')) {
        const arr = text.split('\n');
        // console.log(arr, 'aa');
        const userInfoStr: string = ref('<div class="user-info">');
        const userInfoObj = {};
        arr.forEach((i) => {
            // console.log(i);
            const info = i.split(': ');
            if (info[0] == 'avatar') {
                const regex = /<a\s+(?:[^>]*?\s+)?href=(["'])(.*?)\1/g;
                const match = regex.exec(info[1]);
                const result = match ? match[2] : null;
                userInfoObj[info[0]] = result;
                userInfoStr.value += `<img class='user-info-${info[0]}' alt='' title='' src='${result}' style="border-radius:${userInfoObj.avatarCircle == true ? '0%' : '50%'
                    }"/><div class='user-info-span'>`;
            } else if (info[0] == 'name') {
                userInfoStr.value += `<span class='user-info-item user-info-${info[0]}'>${info[1]}</span><div class='div-ohter'>`;
            } else {
                if (info[0] != 'avatarCircle') {
                    userInfoStr.value += `<span class='user-info-item user-info-${info[0]}'>${info[1]}</span>`;
                }
                userInfoObj[info[0]] = info[1];
            }
        });
        const lastRes = userInfoStr.value + '</div></div></div>';
        userBaseInfoStr.value = lastRes;
        // console.log(lastRes, userInfoObj);
        return lastRes;
    }

    //求职意向模块处理
    if (text.includes('intendedPosition')) {
        const intendedPositionObj = {
            intendedPosition: '意向岗位',
            intendedCity: '意向城市',
            salaryRequirements: '薪资待遇',
            entryTime: '入职时间',
        };
        let res = `<div class='intended-position'>`;
        const intendedPositionArr = text.split('\n');
        // console.log(intendedPositionArr, 'intendedPositionArr');
        intendedPositionArr.forEach((i) => {
            const info = i.split(': ');
            intendedPositionInfo[info[0]] = info[1];
            if (info[0] != 'isShowLabel') {
                const label = `${intendedPositionInfo.isShowLabel == 'true' ? intendedPositionObj[info[0]] + ':' : ''}${[info[1]]}`;
                res += `<div class='intended-position-item'><span class='item-${info[0]}'>${label}</span></div>`;
            }
        });
        res += `</div>`;
        intendedPositionInfoStr.value = res;
        // console.log(intendedPositionInfo, 'intendedPositionInfo');
        return res;
    }

    //教育背景模块处理
    if (text.includes('educationTime')) {
        const intendedPositionObj = {
            educationTime: '教育时间',
            school: '毕业院校',
            speciality: '相关专业',
            educationDesc: '教育描述',
        };
        let res = `<div class='education-background'><div class='education-background-item'>`;
        const educationBackgroundArr = text.split('\n');
        // console.log(educationBackgroundArr, 'educationBackgroundArr');
        educationBackgroundArr.forEach((i) => {
            const info = i.split(': ');
            educationalBackground[info[0]] = info[1];

            if (info[0] != 'isShowLabel') {
                if ([info[0]] != 'educationDesc') {
                    const label = `${educationalBackground.isShowLabel == 'true' ? intendedPositionObj[info[0]] + ':' : ''}${[info[1]]}`;
                    res += `<span class='item-${info[0]}'>${label}</span>`;
                } else {
                    res += `</div><div class='education-desc'>${info[1]}</div>`;
                }
            }
        });
        res += `</div>`;
        educationalBackgroundStr.value = res;
        // console.log(educationalBackground, res, 'educationalBackground');
        return res;
    }

    //技能特长模块处理  特殊处理
    if (text.includes('skills')) {
        // let skills = markdownArr[skillsIndex.value + 1].raw;
        const skillsArr = text.split('\n');
        skillsInfoArr = skillsArr.slice(1);
        // console.log(skillsInfoArr, 'skills');
        let res = `<div class='skills-info'>`;
        skillsInfoArr.forEach((i) => {
            res += `<span class='skills-info-item'>${i}</span>`;
        });
        res += `</div>`;
        // console.log(res, 'res');
        return res;
    }
    return text;
};

//自定义hr
renderer.hr = function (this: Renderer) {
    return `<div class='div-hr'><div></div></div>`;
};

export { marked, renderer, markdownArr, userBaseInfo, userBaseInfoStr, intendedPositionInfo, intendedPositionInfoStr, educationalBackground, educationalBackgroundStr, skillsIndex, skillsInfoArr, skillsInfoStr }